<template>
  <div id="Company_link_add">
    <span>
      <img src="../assets/enterprise.png" alt="" class="bread-icon">
    </span>
    <el-breadcrumb style="display:inline-block">
      <el-breadcrumb-item>
        <span style="font-size:20px;">企业信息</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <span style="font-size:15px;line-height:20px;">首营企业管理</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content-wrap">
      <div class="topNav">
        <span class="navLeft">首营企业管理</span>
        <span class="navRight">
          <!-- <el-button size="small" @click="companySearch()" plain>搜索</el-button> -->
          <el-button type="primary" size="small" @click="companyLinkShow">关联企业</el-button>
        </span>
        <!-- <span class="navMid">
          <img class="icon-search" src="../assets/search.png" alt="">
          <el-input v-model="searchData" size="small" placeholder="请输入内容" class="searchInput"></el-input>
        </span> -->
      </div>
      <el-table :data="companyStateList" border class="table-common" :max-height="tableHeight">
        <el-table-column type="index" label="#" sortable>
        </el-table-column>
        <el-table-column prop="base_info" label="企业名">
        </el-table-column>
        <el-table-column prop="type" label="关联关系">
        </el-table-column>
        <el-table-column prop="state" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.state === '已审核' ? 'primary' : 'warning'" close-transition>{{scope.row.state}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="关联企业" :visible.sync="linkInfoVisible" width="600px">
      <div class="tabs-wrap">
        <div style="width:90%;height:40px;margin:20px auto">
          <el-col :span="20">
            <el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="searchDataLink">
            </el-input>
          </el-col>
          <el-col :span="4" style="text-align:right">
            <el-button type="primary" plain @click="companySearch">搜索</el-button>
          </el-col>

        </div>
        <el-table :data="companyList" border class="table-common" max-height="650">
          <el-table-column type="index" sortable>
          </el-table-column>
          <el-table-column prop="base_info" label="企业名">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button @click="linkChoose(scope.row)" type="primary" plain size="mini">关联企业</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog title="关联类型" :visible.sync="dialogLinkTypeVisible" width="300px">
      <div>
        <el-radio-group v-model="linkType" style="text-align:center">
          <el-radio border disabled label="上游企业">上游企业</el-radio>
          <el-radio border disabled label="下游企业">下游企业</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogLinkTypeVisible = false">取 消</el-button>
        <el-button type="primary" @click="golink()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogLinkTypeVisible: false,
        adminEnterprise: '',
        adminToken: '',
        searchData: '',
        companyList: [],
        linkType: '下游企业',
        linkId: '',
        linkName:'',
        searchDataLink: '',
        linkInfoVisible: false,
        companyStateList: [],
        tableHeight: ''
      }
    },
    mounted() {
      this.adminEnterprise = this.$store.getters.getInfo.enterprise
      this.adminToken = this.$store.getters.getInfo.token
      this.tableHeight = document.getElementsByClassName('table-common')[0].parentNode.clientHeight - 112
      // this.$http({
      //   url: '/enterprise/' + this.adminEnterprise + '/relations/',
      //   method: 'get',
      //   headers: {
      //     'Authorization': 'Token ' + this.adminToken
      //   }
      // }).then(
      //   response => {
      //     console.log(response.data.up_relations)
      //     //拼接首页数组
      //     for (let i = 0; i < response.data.up_relations.length; i++) {
      //       this.companyStateList.push({
      //         id: response.data.up_relations[i].id,
      //         base_info: response.data.up_relations[i].base_info,
      //         type: '上游企业',
      //         state: '已审核'
      //       })
      //     }
      //     for (let i = 0; i < response.data.down_relations.length; i++) {
      //       this.companyStateList.push({
      //         id: response.data.down_relations[i].id,
      //         base_info: response.data.down_relations[i].base_info,
      //         type: '下游企业',
      //         state: '已审核'
      //       })
      //     }
      //     console.log(this.companyStateList)
      //   }
      // ).catch(
      //   error => {
      //     console.log(error.response)
      //     if (error.response.status == 401) {
      //       this.$message({
      //         message: error.response.data.detail,
      //         type: 'warning'
      //       })
      //       this.$router.push({
      //         path: '/login'
      //       });
      //     } else if (error.response.status == 400) {
      //       this.$message({
      //         message: 'error400',
      //         type: 'error'
      //       })
      //     } else {
      //       this.$message({
      //         message: '未知错误',
      //         type: 'error'
      //       })
      //     }
      //     console.log(error);
      //   })

      //审核列表-2 
      this.$http({
        url: '/relation-apply/',
        method: 'get',
        headers: {
          'Authorization': 'Token ' + this.adminToken
        }
      }).then(
        response => {
          console.log(response.data.results)
          //拼接首页数组
          for (let i = 0; i < response.data.results.length; i++) {
            if (response.data.results[i].is_verified == false) {
              this.companyStateList.push({
                id: response.data.results[i].id,
                base_info: response.data.results[i].relation_enterprise,
                type: '下游企业',
                state: '未审核'
              })
            }else{
                this.companyStateList.push({
                id: response.data.results[i].id,
                base_info: response.data.results[i].relation_enterprise,
                type: '下游企业',
                state: '已审核'
              })
            }

          }
          console.log(this.companyStateList)
        }
      ).catch(
        error => {
          console.log(error.response)
          if (error.response.status == 401) {
            this.$message({
              message: error.response.data.detail,
              type: 'warning'
            })
            this.$router.push({
              path: '/login'
            });
          } else if (error.response.status == 400) {
            this.$message({
              message: 'error400',
              type: 'error'
            })
          } else {
            this.$message({
              message: '未知错误',
              type: 'error'
            })
          }
          console.log(error);
        })
    },
    methods: {
      //显示标签、
      filterTag(value, row) {
        return row.state === value;
      },
      //关联关系
      linkChoose(row) {
        this.dialogLinkTypeVisible = true
        console.log(row)
        this.linkId = row.id
        this.linkName = row.base_info
      },
      golink(row) {
        this.$http({
          url: '/enterprise/' + this.adminEnterprise + '/relations/',
          method: 'post',
          headers: {
            'Authorization': 'Token ' + this.adminToken
          },
          data: {
            add_enterprise: this.linkId
          }
        }).then(
          response => {
          this.dialogLinkTypeVisible = false
          this.companyStateList.push({
             id :this.linkId,
             base_info : this.linkName,
             type:'下游企业',
             state: '未审核'
          })
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          }
        ).catch(error => {
          console.log(error.response)
          if (error.response.status == 401) {
            this.$message({
              message: error.response.data.detail,
              type: 'warning'
            })
            this.$router.push({
              path: '/login'
            });
          } else if (error.response.status == 400) {
            this.$message({
              message: 'error400',
              type: '关联失败'
            })
          } else {
            this.$message({
              message: '未知错误',
              type: 'error'
            })
          }
          console.log(error);
        });
      },
      companySearch() {
        if (this.searchDataLink != '') {
          this.$http({
            url: '/enterprise/?search=' + this.searchDataLink,
            method: 'get',
            headers: {
              'Authorization': 'Token ' + this.adminToken
            },
          }).then(
            response => {
              this.companyList = []
              for (let i = 0; i < response.data.results.length; i++) {
                if (response.data.results[i].is_verified == true) {
                  this.companyList.push(response.data.results[i])
                }
              }
              this.$message({
                message: '查询成功',
                showClose: true,
                type: 'success'
              });
            }
          ).catch(error => {
            console.log(error.response)
            if (error.response.status == 401) {
              this.$message({
                message: error.response.data.detail,
                type: 'warning'
              })
              this.$router.push({
                path: '/login'
              });
            } else if (error.response.status == 400) {
              this.$message({
                message: 'error400',
                type: 'error'
              })
            } else {
              this.$message({
                message: '未知错误',
                type: 'error'
              })
            }
            console.log(error);
          });
        } else {
          this.$http({
            url: '/enterprise/',
            // url: '/drugs/'+adminId +'/',
            method: 'get',
            headers: {
              'Authorization': 'Token ' + this.adminToken
            },
            data: {
              page: 1,
              form: '',
              enterprise_id: this.adminId,
              search: '',
              ordering: ''
            }
          }).then(
            response => {
              //success
              console.log(response)
              this.companyList = [];
              for (let i = 0; i < response.data.results.length; i++) {
                if (response.data.results[i].is_verified == true) {
                  this.companyList.push(response.data.results[i])
                }
              }
              console.log(this.companyList)
            },
            response => {
              //error
              console.log(response)
              //   this.$message({
              //   message: response.data.detail,
              //   type: 'warning'
              // });
            }
          )
        }
      },
      companyLinkShow(){
        this.searchDataLink = ''
        this.companySearch()
        this.linkInfoVisible = true
      }
    }

  }

</script>

<style scoped>
  .tabs-wrap {
    width: 90%;
    margin: 20px auto;
  }

</style>
